<script setup>
import axios from "axios";
import { ref, onMounted, h } from "vue";
import { ElNotification } from "element-plus";
onMounted(() => {
  getUserData();
});
const getUserData = async () => {
  let { data } = await axios.get("http://localhost:3000/urlList");
  tableData.value = data;
  copeData.value = tableData.value;
};

const fn = async (name) => {
  console.log(name);
  if (name == "qb") {
    tableData.value = copeData.value;
    tyleArr.value = [{ id: 0, name: "全部" }];
  } else {
    let { data } = await axios.get("http://localhost:3000/urlList");
    console.log(data);
    let arr = [];
    data.forEach((item) => {
      if (item.type == name) {
        // console.log(item);
        arr.push(item);
      }
      // console.log(item.label);
    });

    tableData.value = arr;
    fasData.value = arr;
    switch (name) {
      case "xztj":
        tyleArr.value = [{ id: 0, name: "小站推荐" }];
        break;
      case "zyss":
        tyleArr.value = [{ id: 0, name: "网盘搜索" }];
        break;
      default:
        let res = await axios.get("http://localhost:3000/asideList");
        res.data.forEach((item) => {
          // console.log(item.type)
          if (item.toA == name) {
            tyleArr.value = item.type;
          }
        });
        tyleArr.value.unshift({
          id: 0,
          name: "全部",
        });
        break;
    }
    // console.log(tyleArr.value);
  }
  sontyle.value = tyleArr.value[0].name;
};

const sonfn = (parent) => {
  // console.log(parent)
  if (parent == 0) {
    tableData.value = fasData.value;
  } else {
    tableData.value = fasData.value.filter((item) => item.parent == parent);
  }
};

const tyle = ref("");
const sontyle = ref("");
const tyleArr = ref([
  {
    id: 1,
    name: "全部",
  },
]);
const tableData = ref([]);
const copeData = ref([]);
const fasData = ref([]);
const deleteRow = async (index, id) => {
  console.log(id, index);
  tableData.value.splice(index, 1);
  await axios.delete(`http://localhost:3000/urlList/${id}`);
  ElNotification({
    title: "提示",
    type: "success",
    message: h("i", { style: "color: red" }, `id为${id}的网址被删除`),
  });
  closeFn()
  getUserData();
};

//添加
const urlArr = ref({
  name: "",
  img: "",
  url: "",
  type: "",
  parent: "",
  label: "",
  briefly: "",
});

const sonTyleArr = ref([]);
const titleFn = (label) => {
  switch (label) {
    case "小站推荐":
      sonTyleArr.value = [{ id: "null", name: "null" }];
      break;
    case "常用站点":
      sonTyleArr.value = [
        {
          id: "yd2",
          name: "阅读",
        },
        {
          id: "gw2",
          name: "购物",
        },
        {
          id: "zb2",
          name: "直播",
        },
        {
          id: "fy2",
          name: "翻译",
        },
        {
          id: "yx2",
          name: "邮箱",
        },
        {
          id: "sp2",
          name: "视频",
        },
        {
          id: "cx2",
          name: "出行",
        },
        {
          id: "ai2",
          name: "AI",
        },
      ];
      break;
    case "资源搜索":
      sonTyleArr.value = [
        {
          id: "wpss3",
          name: "网盘搜索",
        },
      ];
      break;
    case "软件游戏":
      sonTyleArr.value = [
        {
          id: "zh4",
          name: "综合",
        },
        {
          id: "az4",
          name: "安卓",
        },
        {
          id: "pg4",
          name: "苹果",
        },
        {
          id: "yx4",
          name: "游戏",
        },
        {
          id: "llq4",
          name: "浏览器",
        },
      ];
      break;
    case "阅读动画":
      sonTyleArr.value = [
        {
          id: "ydxs5",
          name: "阅读小说",
        },
        {
          id: "mfdh5",
          name: "免费动画",
        },
      ];
      break;
    case "音乐动听":
      sonTyleArr.value = [
        {
          id: "zxyy6",
          name: "在线音乐",
        },
        {
          id: "wxyy6",
          name: "无损音乐",
        },
      ];
      break;
    case "实用工具":
      sonTyleArr.value = [
        {
          id: "zh7",
          name: "综合",
        },
        {
          id: "gnl7",
          name: "功能类",
        },
        {
          id: "tpgj7",
          name: "图片工具",
        },
      ];
      break;
    case "学习教育":
      sonTyleArr.value = [
        {
          id: "hhxx9",
          name: "好好学习",
        },
        {
          id: "wdxs9",
          name: "文档学术",
        },
      ];
      break;
    case "办公素材":
      sonTyleArr.value = [
        {
          id: "ppt9",
          name: "PPT",
        },
        {
          id: "tk9",
          name: "图库",
        },
        {
          id: "bz9",
          name: "壁纸",
        },
        {
          id: "tb9",
          name: "图标",
        },
        {
          id: "zt9",
          name: "字体",
        },
        {
          id: "ps9",
          name: "配色",
        },
      ];
      break;
  }
  urlArr.value.parent = sonTyleArr.value[0].id;
  typeFn(sonTyleArr.value[0].name);
};
const typeFn = (label) => {
  urlArr.value.label = label;
};
const addUrl = async () => {
  let isFind = true;
  for (const key in urlArr.value) {
    // console.log(urlArr.value[key]);
    if (urlArr.value[key] == "") {
      // console.log(urlArr.value[key]);
      isFind = false;
      break;
    }
  }
  if (!isFind) {
    ElNotification({
      title: "添加网址",
      type: "info",
      message: h("i", { style: "color: red" }, "消息不能为空"),
    });
    console.log(isFind);
    console.log(urlArr.value);
  } else {
    let { data } = await axios.get("http://localhost:3000/urlList");
    let flag = data.find(
      (item) => item.name == urlArr.value.name || item.url == urlArr.value.url
    );
    if (flag) {
      ElNotification({
        title: "添加网址",
        type: "info",
        message: h("i", { style: "color: red" }, "添加的内容已存在"),
      });
    } else {
      await axios.post("http://localhost:3000/urlList/", {
        name: urlArr.value.name,
        img: urlArr.value.img,
        url: urlArr.value.url,
        type: urlArr.value.type,
        parent: urlArr.value.parent,
        label: urlArr.value.label,
        briefly: urlArr.value.briefly,
      });
      ElNotification({
        title: "添加网址",
        type: "success",
        message: h("i", { style: "color: green" }, "添加成功"),
      });
      urlArr.value = {
        name: "",
        img: "",
        url: "",
        type: "",
        parent: "",
        label: "",
        briefly: "",
      };
      closeFn()
      getUserData();
    }
  }
};

const items = ref([]);
const inpVal = ref("");
const dialogTableVisible = ref(false);
const searchFn = async () => {
  let { data } = await axios.get("http://localhost:3000/urlList");
  let flag = data.find((item) => item.name == inpVal.value || item.url == inpVal.value);
  items.value = flag;
  console.log(flag);
  dialogTableVisible.value = true;
};


//清空下拉框内容
const closeFn=()=>{
  tyle.value=''
  fn('qb')
}
</script>

<template>
  <div class="user">
    <h1>网址管理:</h1>
    <hr />
    <br />
    <h5>筛选：</h5>
    <div class="filter">
      <span>标题：</span>
      <el-select v-model="tyle" placeholder="全部" clearable>
        <el-option label="全部" value="qb" @click="fn('qb')" />
        <el-option label="小站推荐" value="xztj" @click="fn('xztj')" />
        <el-option label="常用站点" value="cyzd" @click="fn('cyzd')" />
        <el-option label="资源搜索" value="zyss" @click="fn('zyss')" />
        <el-option label="软件游戏" value="rjyx" @click="fn('rjyx')" />
        <el-option label="阅读动画" value="yddh" @click="fn('yddh')" />
        <el-option label="音乐动听" value="yydt" @click="fn('yydt')" />
        <el-option label="实用工具" value="sygj" @click="fn('sygj')" />
        <el-option label="学习教育" value="xxjy" @click="fn('xxjy')" />
        <el-option label="办公素材" value="bgsc" @click="fn('bgsc')" />
      </el-select>
      <span>类型：</span>
      <el-select v-model="sontyle" placeholder="全部" clearable>
        <el-option
          :label="item.name"
          :value="item.name"
          v-for="item in tyleArr"
          :key="item.id"
          @click="sonfn(item.id)"
        />
      </el-select>
      <span>数量：{{ tableData.length }}</span>
      <div class="search">
        <input
          type="text"
          v-model.trim="inpVal"
          placeholder="输入你要搜索的网址或者网站名"
          @keyup.enter="searchFn"
        /><i class="iconfont icon-sousuo" @click="searchFn"></i>
      </div>
    </div>
    <el-dialog
      v-model="dialogTableVisible"
      :title="inpVal + '的结果为：'"
      width="1400"
      :z-index="3000"
    >
      <table v-if="items">
        <thead>
          <tr>
            <th style="width: 100px">id</th>
            <th style="width: 150px">名称</th>
            <th style="width: 120px">logo</th>
            <th style="width: 250px">网址</th>
            <th style="width: 120px">类型</th>
            <th style="width: 600px">简介</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ items.id }}</td>
            <td>{{ items.name }}</td>
            <td>
              <img :src="items.img" alt="logo" />
            </td>
            <td>{{ items.url }}</td>
            <td>{{ items.label }}</td>
            <td>{{ items.briefly }}</td>
          </tr>
        </tbody>
      </table>
      <el-empty :description="'没找到' + '-' + inpVal" v-else />
    </el-dialog>

    <el-table :data="tableData" style="width: 100%" max-height="450">
      <el-table-column fixed prop="id" label="id" width="100" />
      <el-table-column prop="name" label="名称" width="150" />
      <el-table-column prop="img" label="logo" width="120">
        <template #default="scope">
          <img
            :src="scope.row.img"
            alt="logo"
            style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="url" label="网址" width="250" />
      <el-table-column prop="label" label="类型" width="120" />
      <el-table-column prop="briefly" label="简介" width="600" />
      <el-table-column fixed="right" label="删除" min-width="80">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index, scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="add">
      <h5>添加：</h5>
      <el-input
        v-model.trim="urlArr.name"
        type="text"
        style="width: 240px"
        placeholder="网站名(必填)"
      />
      <br />
      <el-input
        v-model.trim="urlArr.img"
        type="text"
        style="width: 840px"
        placeholder="网站logo（外链,必填）"
      />
      <br />

      <el-input
        v-model.trim="urlArr.url"
        type="text"
        style="width: 340px"
        placeholder="网址(必填)"
      />
      <br />
      <el-select
        v-model="urlArr.type"
        placeholder="标题（先,必填）"
        clearable
        style="width: 240px"
      >
        <el-option label="小站推荐" value="xztj" @click="titleFn('小站推荐')" />
        <el-option label="常用站点" value="cyzd" @click="titleFn('常用站点')" />
        <el-option label="资源搜索" value="zyss" @click="titleFn('资源搜索')" />
        <el-option label="软件游戏" value="rjyx" @click="titleFn('软件游戏')" />
        <el-option label="阅读动画" value="yddh" @click="titleFn('阅读动画')" />
        <el-option label="音乐动听" value="yydt" @click="titleFn('音乐动听')" />
        <el-option label="实用工具" value="sygj" @click="titleFn('实用工具')" />
        <el-option label="学习教育" value="xxjy" @click="titleFn('学习教育')" />
        <el-option label="办公素材" value="bgsc" @click="titleFn('办公素材')" />
      </el-select>
      <el-select
        v-model="urlArr.parent"
        placeholder="类型（后,必填）"
        clearable
        style="width: 240px"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in sonTyleArr"
          :key="item.id"
          @click="typeFn(item.name)"
        />
      </el-select>
      <br />
      <el-input
        v-model.trim="urlArr.briefly"
        type="textarea"
        style="width: 540px"
        :rows="4"
        placeholder="简介(必填)"
      />
      <div class="btn" @click="addUrl">添加</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url("/src/assets/style/admin/users/users.scss");
table {
  tr {
    // background-color: red;
    text-align: center;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
}
</style>
<style lang="scss">
.filter {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  .search {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    // background-color: red;
    input {
      text-indent: 1em;
      border-radius: 3px;
      width: 70%;
      height: 40px;
      border: 1px solid #b895a7;
      outline: none;
    }
    i {
      font-size: 30px;
      color: #b895a7;
    }
  }
  span {
    margin: 10px;
  }
  .el-select {
    width: 25%;
    .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger {
      width: 100%;
    }
  }
}
.add {
  padding: 20px;
  width: 100%;
  position: relative;
  .btn {
    width: 80px;
    height: 40px;
    border-radius: 5px;
    position: absolute;
    bottom: 5%;
    right: 5%;
    text-align: center;
    line-height: 40px;
    background-color: #b895a7;
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    &:hover {
      transform: scale(0.9);
    }
  }
}
</style>
